<template>
  <div class="shelf-user-info">
    <div class="shelf-info-t">
      <div class="shelf-info-t-l">
        <div class="userName"> {{ userInfo.nickName }}</div>
        <div class="j-name-n">您已经加入小慕读书
          <div class="days"> {{ readDay }} </div>
          天
        </div>
      </div>
      <div class="shelf-info-t-r">
        <div class="shelf-avatar">
          <ImageView
            :src="userInfo.avatarUrl"
            round
          />
        </div>
      </div>
    </div>
    <div class="shelf-info-b">您的书架共有 {{ num }} 本好书</div>
  </div>
</template>

<script>
  import ImageView from "../../components/base/ImageView.vue";

  export default {
    name: "ShelfUserInfo",
    components: {
      ImageView
    },
    data() {
      return {}
    },
    props: {
      num: 0,
      readDay: 0,
      userInfo: {},
    },
  };
</script>

<style lang="less" scoped>
  .shelf-user-info {
    width: 323px;
    height: 124px;
    padding: 14px 18px 17px 18px;
    box-sizing: border-box;
    background: #F8F9FB;
    border: 1px solid #E0E1E2;
    border-radius: 24px;

    .shelf-info-t {
      display: flex;
      justify-content: space-between;

      .shelf-info-t-l {
        .userName {
          font-size: 17px;
          color: #333;
          font-family: PingFangSC-Medium;
        }

        .j-name-n {
          display: flex;
          font-size: 12px;
          color: #868686;
          letter-spacing: 1px;

          .days {

          }
        }
      }

      .shelf-info-t-r {
        .shelf-avatar {
          width: 36px;
          height: 36px;
          background-color: #fff;
          border-radius: 50%;
        }
      }
    }

    .shelf-info-b {
      padding-top: 16px;
      margin-top: 19px;
      font-size: 12px;
      color: #666666;
      border-top: 1px solid #E9E9E9;
      letter-spacing: 1px;
    }
  }
</style>
